<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <%@include file="../common/base.jsp"%>
    <meta charset="utf-8" />
    <meta name ="viewport" content ="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1" />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>我的行程</title>
    <link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${base}/plugin/dropload/dropload.css">
    <link rel="stylesheet" type="text/css" href="${base}/css/global.css?version=${version}">
    <link rel="stylesheet" type="text/css" href="${base}/css/takecar.css?version=${version}">
    <style>
        .ordering{
            display: none;
        }
        .listsuc{

        }
        .divBox{
            cursor: pointer;
        }
        .divBox {
            padding: 10px 6px;
        }
    </style>
</head>
<body>
    <div class="l-order">
        <div class="list-name ordering">进行中订单</div>
        <ul class="order-ul ordering" id="ordering">

        </ul>
        <div class="list-name orderold">已完成订单</div>
        <ul class="order-ul orderold" id="orderold">

            <li class="listsuc">加载完成</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/plugin/dropload/dropload.min.js"></script>
<script type="text/javascript" src="${base}/plugin/layer-v3.0.3/layer.js"></script>
<script type="text/javascript" src="${base}/js/iscroll.js"></script>
<script type="text/javascript" src="${base}/js/localStorageOpt.js?version=${version}"></script>
<%--<script type="text/javascript" src="${base}/plugin/crypto-js/crypto-js.min.js"></script>--%>
<%--<script type="text/javascript" src="${base}/plugin/jsencrypt/jsencrypt.min.js"></script>--%>
<script type="text/javascript" src="${base}/js/utils.js?version=${version}"></script>
<script type="text/html" id="order-list-html">
    <li>
        <div class="divBox router-info list" data-uuid="{{uuid}}" data-subStatus="{{subStatus}}">
            <p class="list-time">
                <img class="img img1" src="${base}/images/time.png">
                <span>{{deparTime}}</span>
                <span class="vehicle-type">{{vehicleType}}</span>
                <span class="list-status {{orderStatus}}">{{subStatusText}}</span>
            </p>
            <p>
                <img class="img img2" src="${base}/images/qidian.png">
                <span>{{originAddress}}</span>
            </p>
            <p>
                <img class="img img3" src="${base}/images/zhongdian.png">
                <span >{{destAddress}}</span>
            </p>
        </div>
    </li>
</script>
<script type="text/html" id="order-list-no">
    <li>
        <div class="divBox router-info list">当前无数据</div>
    </li>
</script>
<script>

    jQuery(document).ready(function($) {
        var $document = $(document);
        var yun=new yueajax( "${openId}");
        // 页数
        var page = 0;
        yun.listHtml=$('#order-list-html').html();
//        listajax(1);
        var staue={
            100:{name:'进行中',class:'sing'},
            101:{name:'进行中',class:'sing'},
            200:{name:'进行中',class:'sing'},
            201:{name:'进行中',class:'sing'},
            202:{name:'进行中',class:'sing'},
            210:{name:'进行中',class:'sing'},
            220:{name:'进行中',class:'sing'},
            300:{name:'进行中',class:'sing'},
            400:{name:'进行中',class:'sing'},
            500:{name:'待支付',class:'pay'},
            511:{name:'待支付',class:'pay'},
            521:{name:'待支付',class:'pay'},
            522:{name:'待支付',class:'pay'},
            513:{name:'待支付',class:'pay'},
            523:{name:'待支付',class:'pay'},
            600:{name:'待评价',class:''},
            610:{name:'已完成',class:''},
            900:{name:'已取消',class:''},
            901:{name:'已取消',class:''},
            902:{name:'已取消',class:''},
            910:{name:'已取消',class:''},
            90200:{name:'已取消',class:''},
            90210:{name:'已取消',class:''},
            90220:{name:'已取消',class:''},
            90511:{name:'已取消',class:''},
            90512:{name:'已取消',class:''},
            90513:{name:'已取消',class:''},
            91200:{name:'已取消',class:''},
            91210:{name:'已取消',class:''},
            91220:{name:'已取消',class:''},
            91521:{name:'已取消',class:''},
            91522:{name:'已取消',class:''},
            91523:{name:'已取消',class:''},
            980:{name:'已取消',class:''},
            990:{name:'已取消',class:''},
        }
        var typeTrip={
            1:'用车',
            2:'日租',
            3:'半日租',
            4:'送机',
            5:'接机',
        }
        function listajax(nowPage,me){
            var nowPage=nowPage|| 1;
            var url='${base}/api/v1/passenger/token/order/list';
            yun.ajax_md5(
                {
                    nowPage:nowPage,
                    businessTypes: 4
                },
                url,
                function (data) {
                    var d=data.data;
                    //因请求第一页的时候会有存在进行中的订单,对此进行处理
                    if(nowPage==1){
                        if(d.orderDoing.length!=0){
                            $('.ordering').show();
                            $('ul.ordering').html("");
                            writeHtml(d.orderDoing,yun.listHtml,$('#ordering'));
                        }
                        if(d.orderDone.length==0){
                            $('ul.orderold').html($('#order-list-no').html());
                        }else{
                            $('ul.orderold').html('');
                            writeHtml(d.orderDone,yun.listHtml,$('#orderold'));
                        }
                    }else{
                        writeHtml(d.orderDone,yun.listHtml,$('#orderold'));
                    }
                    if(d.nowPage>=d.pageCount){
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                        me.resetload();
                    }else{
                        me.resetload();
                    }
                },
                function (data) {
                    layer.msg(data.msg);
                    me.lock();
                    me.noData();
                    me.resetload();
                    changeUrl('index')
                }
            )
        }
        function writeHtml(arr,html,node){
            var arr=arr,node=node,h=html;
            var suc=''
            for(var i=0;i<arr.length;i++){
                var ah=h,ai=arr[i];
                var t=yun.time_count(new Date(ai.deparTime));
                ai.deparTime=(t.day+'  '+t.hour+' '+((new Date(ai.deparTime)).format('hh:mm')));
                var sta=staue[ai.subStatus]
                if(!sta){
                    ai.orderStatus='';
                    ai.subStatusText='已完成';
                }else{
                    ai.orderStatus=sta.class;
                    ai.subStatusText=sta.name;
                }
                ai.vehicleType=typeTrip[ai['typeTrip']]
                suc+=yun.rendering(h,ai);
            }
            node.append(suc);
        }
        $('#orderold').dropload({
            scrollArea : window,
            distance:50,
            loadDownFn : function(me){
                page++;
                listajax(page,me)
            },

        });
        $document.on('click', '.divBox', function(event){
            var t=$(this);
            var d=t.data();
            changeUrl(d.substatus,d.uuid+'&flag=false');
        });
    })
    

</script>
</html>
